<template>
    <div class="dialog-box">
        <el-dialog class="dialog" v-model="visible" top="80px" draggable overflow :close-on-click-modal="false" width="52%"
            :close-on-press-escape="false" :show-close="false">
            <div class="popup">
                <div class="popup-top">
                    <div class="popup-top-item" v-for="(vItem, k) in tabBtnList" :key="k" @click="onChangeTabbtn(vItem, k)"
                        :class="{ active: popupActive == k, none: vItem.value == '', disabled: vItem.isCanUse == '0' }" v-has-role-show="vItem.role">
                        {{ vItem.value }}
                    </div>
                </div>
                <el-divider />
                <div class="popup-title">
                    <div class="popup-title-item">
                        <div>桌号：{{ roomName }}</div>
                        <el-switch v-has-role="'order-lock'" v-model="tableInfo.isLock"  inactive-text="锁台"  @change="lockRoom"></el-switch>
                    </div>
                    <el-divider />
                </div>
                <div class="popup-main" v-if="tableInfo.isLock != '1'">
                    <el-form
                        v-if="popupTitle == '开台' || popupTitle == '预订' || popupTitle == '取消预订' || popupTitle == '维修/正常' || popupTitle == '转台'"
                        class="form" ref="formRef" :model="form" label-width="auto" size="large">
                        <el-row :gutter="20">
                            <template v-if="popupTitle == '维修/正常'">
                                <el-col :span="12">
                                    <el-form-item label="调整后桌台状态：">
                                        <el-radio-group v-model="form.state" class="service-radios">
                                            <el-radio value="0" :disabled="form.state === '1'">维修</el-radio>
                                            <el-radio value="1" :disabled="form.state === '0'">正常</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </template>

                            <template v-else-if="popupTitle == '转台'">
                                <el-col :span="12">
                                    <el-form-item label="目标桌台：">
                                        <el-input v-model="form.selectedTabName" @click="onShowTable"></el-input>
                                    </el-form-item>
                                </el-col>
                            </template>
                            <template v-else>
                                <el-col :span="12">
                                    <el-form-item label="手机号码：" :required="popupTitle == '预订'">
                                        <el-input v-model="form.memberMobile" @blur="searchInfo" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="客户姓名：" :required="popupTitle == '预订'">
                                        <el-input v-model="form.memberName" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="就餐人数:" required>
                                        <el-input v-model="form.arrivedPeoperCount" type="number">
                                            <template #suffix>
                                                <span class="input-span">人&nbsp;</span>
                                            </template>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="性别：" :required="popupTitle == '预订'">
                                        <el-radio-group v-model="form.sex">
                                            <el-radio value="011001">男</el-radio>
                                            <el-radio value="011002">女</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" class="form-item spe">
                                    <div class="form-item-time">{{ currentTime }}</div>
                                    <div class="timePicke">
                                        <el-form-item label="到店时间：" :required="popupTitle == '预订'">
                                            <el-time-picker placeholder="选择日期" v-model="showTime" style="width: 100%;margin-left: 6px;"
                                                :suffix-icon="IconClock" @change="timeSelect"></el-time-picker>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="低消：">
                                        <el-input v-model="form.minConsume">
                                            <template #suffix>
                                                <span class="input-span">元&nbsp;</span>
                                            </template>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="来源：">
                                        <el-select v-model="form.sourceType" placeholder="请选择来源" @change="formSourceChange" :suffix-icon="IconDropDown">
                                            <el-option :label="v.label" :value="v.value" v-for="(v, k) in fromList"
                                                :key="k" ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="订台人：">
                                        <el-tree-select
                                                :disabled="form.sourceType != '104004'"
                                                    v-model="selectedValueText"
                                                    :data="treeData"
                                                    :props="{
                                                        label: 'label',
                                                        value: 'value',
                                                        children: 'children',
                                                    }"
                                                    clearable
                                                    placeholder="请选择订台人"
                                                    :suffix-icon="IconDropDown"
                                                    @change="handleSelectionChange"
                                                    filterable 
                                                />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="服务员：">
                                        <el-select v-model="form.waiterUser" filterable  placeholder="请选择" :suffix-icon="IconDropDown">
                                            <el-option :label="v.label" :value="v.value" v-for="(v, k) in waiterList"
                                                :key="k" ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="特殊要求：" >
                                        <el-select v-model="form.specialRequireType" placeholder="请选择" :suffix-icon="IconDropDown">
                                            <el-option :label="v.label" :value="v.value" v-for="(v, k) in speAskList"
                                                :key="k" ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="备注：">
                                        <el-input v-model="form.remark"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="短信通知：" v-show="popupTitle == '取消预订' || popupTitle == '预订'">
                                        <el-radio v-model="form.isSendMsm" value="1"
                                            @click.prevent="radioChange"></el-radio>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="取消原因：" v-show="popupTitle == '取消预订'">
                                        <el-select v-model="form.cancelReason" placeholder="请选择取消原因">
                                            <el-option :label="v.label" :value="v.label" v-for="(v, k) in cancleList"
                                                :key="k"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </template>
                        </el-row>
                    </el-form>

                    <OperationReport v-if="popupTitle == '操作记录'" :roomCode="form.roomCode"/>
                </div>
            </div>
            <div class="form-footer-btn">
              <div class="btn-cancle" @click="handleCancel">取消</div>
              <div class="btn-submit" @click="handleSubmit">确认</div>
            </div>
        </el-dialog>
    </div>

    <TableDialog v-if="TableDialogVisible" ref="TableDialogRef" :visible="TableDialogVisible"
        @emitCancel="emitTableDialogCancel" @emitSubmit="emitTableDialogSubmit" />
</template>
  
<script setup>
import OperationReport from './operationReport.vue'
import TableDialog from './tableDialog.vue'
import { transformArrayProps, validateMobile } from '@/lib/util.js'
import { formatDate } from '@/utils/chenhao'
import IconClock from '@/components/Icon/IconClock.vue';
import IconDropDown from '@/components/Icon/IconDropDown.vue';
import IconDropDownDis from '@/components/Icon/IconDropDownDis.vue';
import dayjs from "dayjs"
import Api from '@/api'
import useConfigStore from '@/store/config'
import ls from '@/lib/ls'
const configStore = useConfigStore()
const router = useRouter()

const props = defineProps({
    visible: {
        type: Boolean,
        required: false,
    },
})
let orgCode = ls.get('USER_INFO')?.orgCode
const form = ref({
    memberName: '', // 会员姓名
    roomCode: '', // 房台号
    reserveCode: '',
    callCode: '',
    memberMobile: '', // 手机号码
    memberOpenid: '',
    sex: '011001', // 性别
    sourceType: orgCode == '0030' ?'104001' : '104004', // 来源
    openTime: '', // 开台时间
    waiterUser: '', // 开台人
    maintainUser: '', // 订台人
    arrivedPeoperCount: '1', // 人数
    minConsume: '0.00', // 低消
    specialRequire: '',
    specialRequireType: '', // 特殊要求
    remark: '',
    isSendMsm: '0', // 是否发送短信
    reserveTime: '', // 计划到达时间
    cancelReason: '', // 取消原因
    state: '1', // 状态
})
const visible = toRef(props, 'visible')

const roomName = ref('')
const popupActive = ref(0) // 弹窗头部tab
const popupTitle = ref('开台')
const tabBtnList = ref([
    { value: '开台', isCanUse: '0',role: 'order-open' },
    { value: '预订', isCanUse: '0',role: 'order-reserve' },
    { value: '取消预订', isCanUse: '0',role: 'order-reserveCancel' }, 
    { value: '复台记录', isCanUse: '0',role: 'order-clearLog' },
    { value: '转台', isCanUse: '0',role: 'order-transfer' },
    { value: '操作记录', isCanUse: '0',role: 'order-operLog' },
    { value: '维修/正常', isCanUse: '0',role: 'order-repair' },
    { value: '清台', isCanUse: '0',role: 'order-clear' },
])

// 打开弹窗
const tableInfo = ref({})
const open = (table) => {
    tableInfo.value = table
    console.log('table :打开弹窗', table);
    
    selectedValueText.value = table.mainTainUserName
    form.value.maintainUser = table.mainTainUserCode
    if(table.isLock == 1) {
        tableInfo.value.isLock = true
    } else {
        tableInfo.value.isLock = false
    }
    roomName.value = table.roomName
    if (table.roomStateDesc == '空闲中') {
        tabBtnList.value.forEach(item => {
            switch (item.value) {
                case '开台': item.isCanUse = 1; break;
                case '预订': item.isCanUse = 1; break;
                case '复台记录': item.isCanUse = 1; break;
                case '操作记录': item.isCanUse = 1; break;
                case '维修/正常': item.isCanUse = 1; break;
            }
        });
    } else if (table.roomStateDesc == '预订中') {
        tabBtnList.value.forEach(item => {
            switch (item.value) {
                case '开台': item.isCanUse = 1; break;
                case '取消预订': item.isCanUse = 1; break;
                case '转台': item.isCanUse = 1; break;
                case '操作记录': item.isCanUse = 1; break;
            }
        });
    }
    else if (table.roomStateDesc == '维修中') {
        tabBtnList.value.forEach(item => {
            switch (item.value) {
                case '操作记录': item.isCanUse = 1; break;
                case '维修/正常': item.isCanUse = 1; break;
            }
        });
        popupActive.value = 6
        popupTitle.value = '维修/正常'
    }
    turnTableForm.value.consumeCode = table.consumeCode // 转台
    turnTableForm.value.oldRoomCode = table.roomCode // 转台
    turnTableForm.value.reserveCode = table.reserveCode // 预订转台预订号
    form.value.roomCode = table.roomCode
    form.value.minConsume = table.minConsume
    form.value.state = table.roomState === '-1' ? '1' : '0'
    if (table.reserveCode) {
        getReserveInfo(table.reserveCode)
    }
}
// 暴露方法给父组件
defineExpose({ open })

// 点击按钮
const onChangeTabbtn = (v, k) => {
    console.log(v, k);
    if (v.isCanUse == '0') {
        return
    }
    popupTitle.value = v.value
    popupActive.value = k
    if(popupTitle.value == '开台'){
        const currentDate = currentTime.value;
        const fixedTime = timeNow.value;
        const dateTimeString = `${currentDate} ${fixedTime}`;
        showTime.value = dateTimeString
    }
    if (popupTitle.value == '预订') {
        // 是否发送短信
        // form.value.isSendMsm = '1'
        form.value.isSendMsm = '0'
        if(tableInfo.value.roomStateDesc == '预订中'){ // 房台不是预订状态
            showTime.value = toolReTime.value
        }else{
            const currentDate = currentTime.value;
            const dateTimeString = `${currentDate} ${configStore.shopInfo.reserveArrivalTime}`;
            showTime.value = dateTimeString
            console.log(showTime.value);
        }
    } else {
        form.value.isSendMsm = '0'
    }
    if (popupTitle.value == '复台记录') {
        ls.set('TABLE_INFO', { roomName: roomName.value, roomCode: tableInfo.value.roomCode })
        router.push({ path: 'order/clearRecords' })
    }

}

// 监听锁定状态
watch(() => tableInfo.value.isLock, (oldvalue, newvalue) => {

    // 如果锁定 按钮全部不能用
    if (tableInfo.value.isLock == '1') {
        tabBtnList.value.forEach(item => {
            item.isCanUse = 0
        });
    } else {
        // 如果没锁定，按钮恢复成空闲中时可用的
        tabBtnList.value.forEach(item => {
            switch (item.value) {
                case '开台': item.isCanUse = 1; break;
                case '预订': item.isCanUse = 1; break;
                case '复台记录': item.isCanUse = 1; break;
                case '操作记录': item.isCanUse = 1; break;
                case '维修/正常': item.isCanUse = 1; break;
            }
        });
    }
})


// 获取订台信息
const getReserveInfo = (reserveCode) => {
    Api.Common.PcObjProcess.Do({ "functionName": "getReserveInfo", "contentData": reserveCode }).then(res => {
        console.log(res);
        form.value.reserveCode = res.result[0].reserveCode
        form.value.memberName = res.result[0].memberName
        form.value.memberMobile = res.result[0].memberMobile
        form.value.waiterUser = res.result[0].waiterUserCode
        form.value.maintainUser = res.result[0].maintainUserCode
        form.value.maintainUser_old = res.result[0].maintainUserCode
        form.value.arrivedPeoperCount = res.result[0].peopleNumber
        form.value.specialRequireType = res.result[0].specialRequireTypeCode
        form.value.sourceType = res.result[0].sourceTypeCode
        form.value.remark = res.result[0].remark
        // form.value.minConsume = res.result[0].minConsume // 特殊业务 前后端协商规定 以房台低消为准 因为当前接口查询的低消为0会覆盖掉房台低消数据
        toolReTime.value = dayjs(res.result[0].reserveTime).format('YYYY-MM-DD HH:mm:ss')
    })
}

// 获取订台人列表
const customerManageList = ref([])
const getCustomerManageList = () => {
    const transArea = [
        ['userCode', 'value'],
        ['userName', 'label']
    ]
    customerManageList.value = transformArrayProps(configStore.customerManageList, transArea)
    customerManageList.value.push({ value: '', label: '无' })
}
getCustomerManageList()
// 获取来源
const fromList = ref([])
const getFrom = () => {
    const transArea = [
        ['code', 'value'],
        ['name', 'label']
    ]
    fromList.value = transformArrayProps(configStore.sourceList, transArea)
    fromList.value.push({ value: '', label: '无' })
}
getFrom()
// 获取特殊要求
const speAskList = ref([])
const getSpeAsk = () => {
    const transArea = [
        ['code', 'value'],
        ['name', 'label']
    ]
    speAskList.value = transformArrayProps(configStore.specialList, transArea)
    speAskList.value.push({ value: '', label: '无' })
}
getSpeAsk()
// 获取取消原因
const cancleList = ref([])
const getCancleList = () => {
    const transArea = [
        ['code', 'value'],
        ['name', 'label']
    ]
    cancleList.value = transformArrayProps(configStore.cancelList, transArea)
    cancleList.value.push({ value: '', label: '无' })
}
getCancleList()
// 获取服务员列表
const waiterList = ref([])
const getWaiterList = () => {
    const transArea = [
        ['userCode', 'value'],
        ['userName', 'label']
    ]
 
    waiterList.value = transformArrayProps(configStore.waiterList, transArea)
    waiterList.value.push({ value: '', label: '无' })

    //    const t = '张三';
    const t = ls.get('USER_INFO').userName;
   const result = waiterList.value.find(item => item.label === t)?.value || null;
   if(result!=null) {
       form.value.waiterUser = result
   }
}
getWaiterList()



// 手机号码失去聚焦 查询会员信息
const searchInfo = (e) => {
    if (!form.value.memberMobile) {
        return
    }
    Api.Common.PcObjProcess.Do({ "functionName": "GetMemberInfo", "orgCode": "0004", "contentData": { "mobile": form.value.memberMobile } })
        .then(res => {
            if (res.name) {
                form.value.memberName = res.name
            }
        })
}

const showTime = ref('') // 开台预订到店时间（组件用）
const toolReTime = ref('') // 预订时间（过渡用工具）
const timeNow = ref(dayjs().format('HH:mm'))
const currentTime = ref(dayjs().format('YYYY-MM-DD')) // 当前时间
// 拼接时间
const currentDate = currentTime.value;
const fixedTime = timeNow.value;
const dateTimeString = `${currentDate} ${fixedTime}`;
showTime.value = dateTimeString
const timeSelect = (e) => {
    if (e) {
        const currentDate = currentTime.value;
        // console.log(currentDate);
        const fixedTime = dayjs(e).format('HH:mm:ss');
        const dateTimeString = `${currentDate} ${fixedTime}`;
        showTime.value = dateTimeString
        // console.log(showTime.value);
    }
}
// 咨客大厅弹窗来源变化
const formSourceChange = (e) => {
    console.log(e);
    if (e != '104004') {
        form.value.maintainUser = ''
        selectedValueText.value = ''
        selectedValue.value = ''
    }
}
// 短信通知改变
const radioChange = (e) => {
    if (form.value.isSendMsm == '0') {
        form.value.isSendMsm = '1'
    } else {
        form.value.isSendMsm = '0'
    }
}

// 转台
// 打开桌台选择弹窗
let TableDialogVisible = ref(false)
const TableDialogRef = ref()
const onShowTable = () => {
    TableDialogVisible.value = true
    //   nextTick(() => {
    //     TableDialogRef.value.open(table)
    //   });
}
// 点击弹窗里的取消按钮
const emitTableDialogCancel = (params) => {
    TableDialogVisible.value = false
}
// 点击弹窗里的确定按钮
const emitTableDialogSubmit = (params) => {
    console.log('params :>> ', params);
    TableDialogVisible.value = false
    form.value.selectedTabName = params.selectedTabName
    turnTableForm.value.newRoomCode = params.newRoomCode
}

// 取消
const emit = defineEmits(['emitCancel', 'emitSubmit',])
const handleCancel = (params) => {
      selectedValue.value = ""
      selectedValueText.value = ""
    emit('emitCancel', 'cancel')
}

// 确认
const subFlag = ref(false)
const handleSubmit = (params) => {
    // console.log('showTime.value :>> ', showTime.value);
    // return
    if (tableInfo.value.isLock == '1') return emit('emitSubmit', 'emitSubmit',)
    form.value.reserveTime = showTime.value // 时间赋值
     if(selectedValue.value) {
         form.value.maintainUser  = selectedValue.value //訂台人
     } 
     form.value.maintainUserName = selectedValueText.value
    if(subFlag.value){
        ElNotification({
            title: '提示',
            message: '加载中，请稍等',
            type: 'error',
        })
        return
    }
    subFlag.value = true
    // console.log(form.value);
    switch (popupTitle.value) {
        case '开台':
            if (form.value.arrivedPeoperCount == '') {
                ElNotification({
                    title: '提示',
                    message: '就餐人数不能为空',
                    type: 'error',
                })
                subFlag.value = false
                return
            }
            form.value.openTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
            Api.Common.PcObjProcess.Do({ "functionName": "roomOpen", "contentData": form.value })
                .then(res => {
                    console.log('开台 res :>> ', res);
                    ElNotification({
                        title: '提示',
                        message: '开台成功',
                        type: 'success',
                    })
                    ls.remove('TABLE_BTN')
                    ls.set('TABLE_INFO', res.result[0])
                    // return
                    router.push({
                        path: '/order/orderTable',
                    })
                    subFlag.value = false
                    // emit('emitSubmit', 'emitSubmit',)
            }).catch(err=>{
                subFlag.value = false
            })
            break
        case '预订':
            if (form.value.arrivedPeoperCount == '') {
                ElNotification({
                    title: '提示',
                    message: '就餐人数不能为空',
                    type: 'error',
                })
                subFlag.value = false
                return
            }
            // if (form.value.memberMobile == '') {
            //     ElNotification({
            //         title: '提示',
            //         message: '手机号不能为空',
            //         type: 'error',
            //     })
            //     return
            // } else {
            //     if (!validateMobile(form.value.memberMobile)) return
            // }
            // if (form.value.memberName == '') {
            //     ElNotification({
            //         title: '提示',
            //         message: '客户姓名不能为空',
            //         type: 'error',
            //     })
            //     return
            // }
            // return
            // console.log('预定接口 form.value :>> ', form.value);
            form.value.reserveTime = dayjs(form.value.reserveTime).format('YYYY-MM-DD HH:mm:ss')
            Api.Common.PcObjProcess.Do({ "functionName": "reserveAdd", "contentData": form.value })
                .then(res => {
                    console.log(res);
                    ElNotification({
                        title: '提示',
                        message: '预订成功',
                        type: 'success',
                    })
                    subFlag.value = false
                    emit('emitSubmit', 'emitSubmit',)
                }).catch(err=>{
                    subFlag.value = false
                })
            break
        case '取消预订':
            Api.Common.PcObjProcess.Do({ "functionName": "reserveCancel", "contentData": form.value })
                .then(res => {
                    ElNotification({
                        title: '提示',
                        message: res.result,
                        type: 'success',
                    })
                    subFlag.value = false
                    emit('emitSubmit', 'emitSubmit',)
                }).catch(err=>{
                    subFlag.value = false
                })
            break
        case '维修/正常':
            const data = {
                roomList: [form.value.roomCode],
                state: form.value.state
            }
            Api.Common.PcObjProcess.Do({ "functionName": "roomRepair", "contentData": data })
                .then(res => {
                    ElNotification({
                        title: '提示',
                        message: '修改维修状态成功',
                        type: 'success',
                    })
                    subFlag.value = false
                    emit('emitSubmit', 'emitSubmit',)
                }).catch(err=>{
                    subFlag.value = false
                })
            break
        case '操作记录':
            emit('emitSubmit', 'emitSubmit',)
            subFlag.value = false
            break
        case '转台':
            confirmTurnTable()
            break
    }
}
// 转台参数
const turnTableForm = ref({
    oldRoomCode: '', // 旧桌台
    newRoomCode: '', // 新桌台
    consumeCode: '', // 消费单号
    peopleCount: '',
    reserveCode: '' // 预订编号 
})

// 确认转台
const confirmTurnTable = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "RoomChange", "contentData": turnTableForm.value })
        .then(res => {
            ElNotification({
                title: '提示',
                message: res.result,
                type: 'success',
            })
            emit('emitSubmit', 'emitSubmit',)
            subFlag.value = false
        }).catch(err=>{
            subFlag.value = false
        })

}

const stateVal = ref('')
// 房台锁定
const lockRoom = (e) => {
        if (e) {
        stateVal.value = 1
    } else {
        stateVal.value = 0
    }
    let data = {
        state: stateVal.value,
        roomList: [tableInfo.value.roomCode],
        currentDate: formatDate('YY-MM-DD hh:mm:ss')
    }
    Api.Common.PcObjProcess.Do({ "functionName": "RoomLock", "contentData": data })
        .then(res => {
            console.log('房台锁定 res :>> ', res);
            ElNotification({
                title: '提示',
                message: '操作成功',
                type: 'success',
            })
            // emit('emitSubmit', 'emitSubmit',)
        })
}


const treeData = ref([])
// 绑定的选择值
const selectedValue = ref(''); 
const selectedValueText = ref(''); 
//获取订台人配置
const getGetOrgGroup = ()=> {
  Api.Common.PcObjProcess.Do({ "functionName": "GetOrgGroup", "contentData":"" })
    .then(res => {
       console.log(res,'列表数据')
         if(res.result.length > 0) {
          treeData.value = res.result
         }
     })
}
getGetOrgGroup()

const handleSelectionChange = (value) => {
    selectedValue.value = value
 // 遍历 treeData 查找匹配的节点
 for (let group of treeData.value) {
    // 遍历该组的子节点（children）
    for (let child of group.children) {
      // 判断子节点的 value 是否与选中的值匹配
      if (child.value === value) {
        // 拼接上一级的 label（父节点）和当前子节点的 label
        const result = `${group.label} - ${child.label}`;
        // 将拼接结果存储到 formData.selectedName 中（或者其他需要显示的地方）
        selectedValueText.value = result;
        return; // 找到匹配项后结束函数
      }
    }
  }
}; 
</script>
  
<style  lang="scss" scoped>
.dialog-box {

    ::v-deep {
        .el-dialog {
            width: 1000px;
            // height: 800px;
            border-radius: 16px;
            padding-left: 50px;
            padding-right: 50px;
            padding-bottom: 40px;
        }

        .el-dialog__title {
            font-weight: bold;
            font-size: 20px;
            color: #212121;
            line-height: 36px;
            // padding-left: 60px;
        }

        .el-divider {
            margin: 0;
        }

        .el-form-item__label {
            font-size: 16px;
            color: #212121;

        }
    }

    .footer-box {
        margin-top: 10px;
        display: flex;
        justify-content: end;

        .cancel {
            width: 160px;
            height: 60px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            font-size: 24px;
            color: #FF6A00;
        }

        .submit {
            width: 160px;
            height: 60px;
            background: #FF6A00;
            border-radius: 8px;
            font-size: 24px;
            color: #FFFFFF;
            margin-left: 30px;
        }
    }
}


.popup {
    white-space: nowrap;
    background: #FFFFFF;
    border-radius: 16px;

    .popup-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 10px 20px 0px;

        .popup-top-item {
            // width: 208px;
            flex: 0 calc(25% - 16px);
            /* 计算每个子元素的宽度，减去 margin */
            height: 60px;
            text-align: center;
            background: #fff;
            border: 1px solid #E6E6E6;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #666666;
            line-height: 60px;
            // margin-right: 16px;
            margin-bottom: 20px;
            cursor: pointer;

            &.active {
                background: #FFE566;
                color: #212121;
                border: none;
            }

            &.disabled {
                background: #E6E6E6;
                border-radius: 8px;
                color: #CCCCCC;
            }

            &.none {
                background: #FFFFFF;
            }
        }
    }

    .popup-title {
      
        .popup-title-item {
            height: 91px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 20px;
            color: #212121;
            line-height: 20px;

            ::v-deep {
                // .el-switch {}

                .el-switch__label * {
                    font-size: 18px;
                    color: #FF6A00;
                }

                // .el-switch__core {
                //     width: 55px;
                //     height: 28px;
                //     border-radius: 18px;
                // }

                // .el-switch__action {
                //     width: 27px;
                //     height: 26px;
                //     background: #FFFFFF;
                //     border-radius: 50%;
                // }

                .el-switch.is-checked .el-switch__core {
                    background-color: #FF6A00;
                    border: #FF6A00;
                }
            }
        }
    }

    .popup-main {
           margin-top: 20px;
        .form {
            .form-speItem {
                // margin-bottom: 20px;

                ::v-deep(.el-radio__inner) {
                    border-radius: 2px;
                }

                ::v-deep(.el-radio__input.is-checked) .el-radio__inner::after {
                    content: '✔';
                    width: 8px;
                    height: 3px;
                    border: 1px solid white;
                    border-top: transparent;
                    border-right: transparent;
                    text-align: center;
                    display: block;
                    position: absolute;
                    top: 2px;
                    left: 6px;
                    // transform: rotate(-45deg);
                    color: #ff6a00;
                    // font-size: 16px;
                    border-radius: 0px;
                    background-color: #ffffff;
                }
            }
        }

        ::v-deep(.el-input__wrapper) {
            // width: 320px;
            // height: 48px;
            background: #F9F9F9;
            border-radius: 8px;
            box-shadow: none;
        }

        ::v-deep(.el-select__wrapper) {
            // width: 320px;
            // height: 48px;
            background: #F9F9F9;
            border-radius: 8px;
            box-shadow: none;
        }

        ::v-deep(.el-date-editor.el-input) {
            // width: 320px;
            // height: 48px;
        }

        ::v-deep(.el-radio__label) {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #666666;
            line-height: 16px;
        }
    }

    ::v-deep(.el-select__icon) {
        width: 18px;
        height: 11px;
        color: #212121;
        font-weight: 700;
    }

    ::v-deep(.el-input__inner) {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        line-height: 16px;
    }

    ::v-deep(.el-radio__inner) {
        // margin-left: 20px;
        width: 20px;
        height: 20px
    }

    ::v-deep(.el-radio__input.is-checked .el-radio__inner) {
        border-color: #ff6a00;
        /* 选中状态边框颜色 */
        background-color: #ffffff;
        /* 选中状态背景颜色 */
        width: 20px;
        height: 20px
    }

    ::v-deep(.el-radio__inner:after) {
        background-color: #ff6a00;
        width: 8px;
        height: 8px;
    }

    ::v-deep(.el-radio__inner) {
    width: 20px !important;
    height: 20px !important;
    border:2px solid #666666 !important;
  }
    ::v-deep(.el-select__prefix) {
        display: none
    }
}

.form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
   // margin-bottom: 20px;

    &.spe {
        position: relative;

    }

    .form-item-time {
        position: absolute;
        left: 150px;
        top: 10px;
        z-index: 999;
    }

    .timePicke {
        ::v-deep(.el-input__inner) {
            padding-left: 90px !important;
        }
    }

    .input-span {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        line-height: 16px;
    }
    .mt20 {
        margin-top: 20px;
    }

}
          .form-footer-btn {
          display: flex;
          align-items: center;
          justify-content: end;

          .btn-cancle {
            text-align: center;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 24px;
            color: #FF6A00;
            line-height: 60px;
            width: 160px;
            height: 60px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            margin-right: 36px;
            cursor: pointer;
          }

          .btn-submit {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 24px;
            color: #FFFFFF;
            line-height: 60px;
            text-align: center;
            width: 160px;
            height: 60px;
            background: #FF6A00;
            border-radius: 8px;
            cursor: pointer;
          }
        }
::v-deep .popup .el-switch__core {
    width: 0.41667rem;
    height: 0.1875rem;
    border-radius: 0.09375rem;
}
::v-deep .popup .el-switch__core .el-switch__action {
    width: 0.16667rem;
    height: 0.16667rem;
    background: #FFFFFF;
    border-radius: 50%;
}
::v-deep .el-switch.is-checked .el-switch__core .el-switch__action {
    left: calc(100% - 0.17854rem) !important;
}
</style>
  